<template>
  <div class="app">
    <el-container>
      <el-header class="headerTop" style="height:190px;">
        <courseBaseInfo @submitClick="handleSubmitApply" />
      </el-header>
      <!-- <el-main>
        <el-row>
          <el-col :span="8"><div> <chooseTeacherArea ref="chooseTeacher" /></div></el-col>
          <el-col :span="16"
            ><div>  <chooseStudentArea ref="chooseStudent" /></div
          ></el-col>
        </el-row>
      </el-main> -->
      <el-container style="height:520px">
        <el-main style="width:40%; padding:0; ">
          <chooseTeacherArea ref="chooseTeacher" />
        </el-main>
        <el-main class="mainRight" style="width:60%; ">
          <chooseStudentArea ref="chooseStudent" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import courseBaseInfo from "./addCourse/courseBaseInfo.vue";
import chooseTeacherArea from "./addCourse/chooseTeacherArea";
import chooseStudentArea from "./addCourse/chooseStudentArea";
export default {
  components: { courseBaseInfo, chooseTeacherArea, chooseStudentArea },
  methods: {
    handleSubmitApply(BaseInfo) {
      let studentId = this.$refs.chooseStudent.StudentHavedBeAdded;
      let teacherId = this.$refs.chooseTeacher.teacherId;
      if (studentId == null || teacherId == null) {
        this.$myMessage.warning(this, "未选择课程教师或上课学生");
        return;
      }
      let options = BaseInfo;
      options.studentId = studentId;
      options.teacherId = teacherId;
      console.log(options); //静态检测通过
      //正式提交
      this.$http
        .post(this.$api.CourseMonitorAddOrModCourse, options)
        .then((resp) => {
          if (resp.success) {
            this.$myMessage.success(this, resp.message);
          } else {
            this.$handleFailResp(this, resp);
          }
        });
    },
  },
};
</script>

<style scoped>
.app {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.headerTop {
  border-bottom: solid 1px rgb(212, 212, 212);
}
.mainRight {
  border-left: solid 1px rgb(212, 212, 212);
}
</style>
